<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
{% block sw_search_preferences_modal %}
<sw-modal
    class="sw-search-preferences-modal"
    :title="$tc('global.sw-search-preferences-modal.title')"
    :is-loading="isLoading"
    @modal-close="onClose"
>
    {% block sw_search_preferences_modal_description %}
    <p
        class="sw-search-preferences-modal__description"
        v-html="$tc('global.sw-search-preferences-modal.description')"
    >
    </p>
    {% endblock %}

    {% block sw_search_preferences_modal_grid %}
    <sw-data-grid
        :show-selection="false"
        :show-actions="false"
        :plain-appearance="true"
        :data-source="searchPreferences"
        :columns="searchPreferencesColumns"
    >
        <template #column-active="{ item }">
            {% block sw_search_preferences_modal_grid_column_active %}
            <mt-checkbox
                v-model:checked="item._searchable"
                @update:checked="onChangeSearchPreference(item)"
            />
            {% endblock %}
        </template>

        <template #column-moduleName="{ item }">
            {% block sw_search_preferences_modal_grid_column_module_name %}
            <span>{{ getModuleName(item.entityName) }}</span>
            {% endblock %}
        </template>
    </sw-data-grid>
    {% endblock %}

    <template #modal-footer>
        {% block sw_search_preferences_modal_button_cancel %}
        <mt-button
            size="small"
            class="sw-search-preferences-modal__button-cancel"
            variant="secondary"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_search_preferences_modal_button_save %}
        <mt-button
            variant="primary"
            size="small"
            class="sw-search-preferences-modal__button-save"
            :disabled="isLoading"
            @click="onSave"
        >
            {{ $tc('global.default.save') }}
        </mt-button>
        {% endblock %}
    </template>
</sw-modal>
{% endblock %}
